コンピューターグラフィックスでは、 ベクター と ビットマップ グラフィックスを区別します。ベクター画像（例：SVG）は論理的な形状で画像を表現します。すべての要素はDOM内に永続的に存在するオブジェクトです。逆に、ビットマップ画像（例：HTML5 Canvas）は 色付きドットのラスタによって動作します。

1. Canvasへの移行

SVGはCSSでスタイル設定しやすい一方、ブラウザはすべてのノードを追跡しなければなりません。高パフォーマンスが必要な用途、たとえば数千個の動きのあるパーツを持つゲームの場合、Canvas APIの方が優れています。これは単一のDOM要素として描画面をカプセル化しており、実質的に「白紙のキャンバス」です。

2. 描画コンテキスト

この <canvas> 要素は、その コンテキストを初期化するまでは「ブラックボックス」です。このオブジェクトのメソッドが実際の描画インターフェースを提供し、表示要素とレンダリングロジックを分離します。

3. ネームスペースの認識

SVGのようなXMLベースのグラフィックスでは、 xmlns="http://www.w3.org/2000/svg" 属性は非常に重要です。これはブラウザに標準のHTMLパースから特定のグラフィックススキーマへの切り替えを通知し、形状タグがインタラクティブなオブジェクトとして認識されるようにします。